<template>
  <div class="main">
    <div class="content-left">
      <ArticleItem />
    </div>
    <div class="content-right">
      <Author />
      <HotArticle />
    </div>
  </div>
</template>

<script setup>
import ArticleItem from './ArticleItem.vue';
import Author from '@/pages/components/author/index.vue';
import HotArticle from '@/pages/components/hotArticle/index.vue';
</script>
<style scoped lang="scss">
.main {
  background: var(--grey-0);
  width: 100%;
  padding: 0 16%;
  display: flex;
  box-sizing: border-box;
  margin: 0 auto;

  .content-left {
    width: 60%;
  }

  .content-right {
    margin-top: 20px;
    margin-left: 20px;
    width: 35%;
    position: sticky;
    top: 200px;
    z-index: 1;
  }
}
</style>
